<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>拼图工具</title>
		<script src="jquery-2.2.1.min.js"></script>
		<style type="text/css">
			.center-text {
				text-align: center;
			}
			
			.inputfile {
				opacity: 0;
			}

			.lab {
				border-radius: 10px;
				background-color: #cc99ff;
				font-family: 楷体;
				font-size: 24px;
			}
			.merge{
				border-radius: 10px;
				background-color: #1a8cff;
				font-family: 楷体;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<h3 class="center-text">拼图模式（左右拼图）</h3><br />
		<form name="form" id="form">
			<div class="center-text">
				<input type="file" name="file1" id="file1" class="inputfile" accept="image/*" /><br />
				<label for="file1" class='lab'>上传图片1</label><br /><br />
				<img src="o.jpg" id="img1" style="width: 300px;"><!-- 图片显示区域大小 -->
			</div>
			<br />
			<br />
			<div class="center-text">
				<input type="file" name="file2" id="file2" class="inputfile" accept="image/*" /><br />
				<label for="file2" class='lab'>上传图片2</label><br /><br />
				<img src="o.jpg" id="img2" style="width: 300px;"><!-- 图片显示区域大小 -->
			</div>
			<br />
			<br />
			<div class="center-text">
				<button id="mergeAndDownload" class="merge" type="button" style="width:120px;height:40px;">拼图并下载</button>&nbsp;&nbsp;
				<button id="mergeAndShow" class="merge" type="button" style="width:120px;height:40px;">拼图并预览</button>
			</div>
			<br />
			<div>如果直接“拼图并下载”操作无法正常下载图片，可以尝试先“拼图并预览”，再长按图片保存图片（或单击鼠标右键），如果还无法正常操作，请点击右上角选择“在浏览器打开”在新浏览器操作,谢谢!</div><br />
			<br />
			<br />
			<div  class="center-text" id="showArea"></div>
		</form>
		<script>
			var img1_size={width:0,height:0};
			var img2_size={width:0,height:0};
			function getImageSize(url,save){
				var img = new Image();
				img.src = url;
				img.onload = function(){
					// 打印
					save.width=img.width;
					save.height=img.height;
				}
			};
			function getObjectURL(file) {
				var url = null;
				if (window.createObjectURL != undefined) {
					url = window.createObjectURL(file);
				} else if (window.URL != undefined) { // mozilla(firefox)  
					url = window.URL.createObjectURL(file);
				} else if (window.webkitURL != undefined) { // webkit or chrome  
					url = window.webkitURL.createObjectURL(file);
				}
				return url;
			};
			$("#file1").change(function() {
				var objUrl = getObjectURL(this.files[0]); //获取文件信息
				//console.log("objUrl = " + objUrl);
				if (objUrl) {
					$("#img1").attr("src", objUrl);
					getImageSize($("#img1").attr("src"),img1_size);
				}
			});
			$("#file2").change(function() {
				var objUrl = getObjectURL(this.files[0]); //获取文件信息
				console.log("objUrl = " + objUrl);
				if (objUrl) {
					$("#img2").attr("src", objUrl);
					getImageSize($("#img2").attr("src"),img2_size);
				}
			});
			function add0(m){return m<10?('0'+m):m }
			function getSaveFileName()
			{
				var time = new Date();
				var y = time.getFullYear();
				var m = time.getMonth()+1;
				var d = time.getDate();
				var h = time.getHours();
				var mm = time.getMinutes();
				var s = time.getSeconds();
				return y+add0(m)+add0(d)+'_'+add0(h)+add0(mm)+add0(s)+".jpg";
			}
			function downLoad(url){
				var oA = document.createElement("a");
				oA.download = getSaveFileName();// 设置下载的文件名，默认是'下载'
				oA.href = url;
				document.body.appendChild(oA);
				oA.click();
				oA.remove(); // 下载之后把创建的元素删除
			}
			function merge(){
				//console.log('width:'+img1_size.width+',height:'+img1_size.height);
				//console.log('width:'+img2_size.width+',height:'+img2_size.height);
				
				var canvas = document.createElement('canvas');
				canvas.width = (img1_size.width+img2_size.width)/2; //
				canvas.height = Math.max(img1_size.height,img2_size.height)/2;
				canvas.style.backgroundColor = '#EEEEEE';
				var ctx=canvas.getContext('2d');
				//ctx.rect(0,0,canvas.width,canvas.height);
				ctx.fillStyle = "#FFFFFF";
				ctx.fillRect(0, 0, canvas.width, canvas.height);
				var img1=document.getElementById('img1');
				var img2=document.getElementById('img2');
				ctx.drawImage(img1, 0, 0, img1_size.width, img1_size.height, 0, 0, img1_size.width/2, img1_size.height/2);
				ctx.drawImage(img2, 0, 0, img2_size.width, img2_size.height, img1_size.width/2, 0, img2_size.width/2, img2_size.height/2);
				var data = canvas.toDataURL("image/jpeg");//.replace("image/jpeg", "image/octet-stream");
				return data;
			};
				$("#mergeAndDownload").click(function(){
					var data=merge();
					downLoad(data);
				});
				$("#mergeAndShow").click(function(){
					var data=merge();
					var showArea = document.getElementById('showArea');
					showArea.innerHTML = ""
					var img = document.createElement('img');
					img.width = 300; //
					//img.height = 400;
					img.src=data;
					showArea.appendChild(img);
					setTimeout(function(){
						window.scrollTo(0,document.documentElement.clientHeight);  //js
					},100);
				});
		</script>
	</body>
</html>

